<template>
	<view>
		<u-navbar title="分享有礼" :immersive="true"></u-navbar>
		<image class="bg" src="http://v2.qidka.com/storage/config/invite.png"></image>

		<u-gap height="746"></u-gap>
		<view class="flex-col justify-center align-center" @longtap="show=true;">
			<tki-qrcode ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground"
			 :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :showLoading="true"
			 @result="qrR" />

			<u-gap height="40"></u-gap>
			<view style="position: relative;z-index: 99;font-size: 20rpx;color: rgba(200,170,117,1);">长按保存图片</view>
			<u-gap height="40"></u-gap>
			<view class="init">
				{{init}}
			</view>

			<u-gap height="30"></u-gap>
			<image class="btn" src="../../static/images/invite-btn.png" @click="copy(val)"></image>
		</view>

		<!-- 长按 -->
		<u-action-sheet class="ac" :list="list" v-model="show" :mask-close-able="false" @click="ac"></u-action-sheet>

		<!-- 图片预览 -->
		<u-mask :show="show">
			<view>
				<image :src="captchaSrc" class="haibao" mode="widthFix"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	import uniCopy from '@/utils/uni-copy.js'
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tools.js'
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				init: '',
				ifShow: true,
				val: '', // 要生成的二维码值
				size: 240, // 二维码大小
				unit: 'upx', // 单位
				background: '#fff', // 背景色
				foreground: '#000', // 前景色
				pdground: '#000', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				list: [{
					text: '保存图片'
				}],
				show: false,
				pic: ''
			};
		},
		computed: {
			captchaSrc() {
				return this.pic.replace(/[\r\n]/g, "");
			}
		},
		onLoad() {
			this.val = this.$store.state.url + '/invite?invite_code=' + this.$store.state.userinfo.invite_code
			this.init = this.$store.state.userinfo.invite_code
			this.getPic()
		},
		onShow() {
			if (!this.init) {
				this.$msg('请先登录', 500, true).then(res => {
					this.$goto('/pages/login/login', 'redirect')
				})
			}
		},
		methods: {
			getPic() {
				this.$u.get('/member/share/pic').then(res => {
					this.pic = res.data.result.pic
				})
			},
			sliderchange(e) {
				this.size = e.detail.value
			},
			creatQrcode() {
				this.$refs.qrcode._makeCode()
			},
			saveQrcode() {
				this.$refs.qrcode._saveCode()
			},
			qrR(res) {
				this.src = res
			},
			clearQrcode() {
				this.$refs.qrcode._clearCode()
				this.val = ''
			},
			ifQrcode() {
				this.ifShow = !this.ifShow
			},
			selectIcon() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.icon = res.tempFilePaths[0]
						setTimeout(() => {
							that.creatQrcode()
						}, 100);
						// console.log(res.tempFilePaths);
					}
				});
			},
			copy(content) {
				uniCopy({
					content: content,
					success: res => {
						this.$msg(res)
					},
					error: e => {
						this.$msg(res)
					}
				})
			},
			downImg(url) {
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							let file = res.tempFilePath;
							this.saveImg(file)
						}
					}
				})
			},
			saveImg(path) {
				uni.saveImageToPhotosAlbum({
					filePath: path,
					success: function() {
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							duration: 2000
						});
					}
				});
			},
			ac(e) {
				if (e == 0) {
					uni.showLoading({
						title: '请稍等...',
						mask: true
					})
					base64ToPath(this.pic).then(res => {
						this.saveImg(res)
					})
				}
			}
		},
	}
</script>

<style lang="scss">
	.bg {
		width: 750rpx;
		height: 1840rpx;
		position: absolute;
	}

	.init {
		font-size: 68rpx;
		font-family: Helvetica;
		color: rgba(139, 74, 4, 1);
		position: relative;
		letter-spacing: 2rpx;
		z-index: 9;
	}

	.btn {
		width: 121rpx;
		height: 42rpx;
	}

	.haibao {
		width: 100vw;
		transform: scale(0.85);
		position: relative;
	}

	.ac .u-mask {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
